<template>
  <div>
    <PageContainer>
      <el-tabs v-model="projectid">
        <el-tab-pane label="篮球" name="1" />
        <el-tab-pane label="网球" name="2" />
      </el-tabs>
      <div class="mt-20px">
        <WeekSelect v-model="selectDate" />
      </div>

      <el-dialog v-model="groundBookDialog" title="场地预订管理" alignCenter>
        <div class="flex gap-[30px] color-666 text-[14px]">
          <span class="item flex items-center gap-[5px]">
            <el-icon><WindPower /></el-icon> 网球一号
          </span>
          <span class="item flex items-center gap-[5px]">
            <el-icon><Clock /></el-icon> 2024-08-30 周五
          </span>
        </div>
        <el-tabs v-model="tabName" class="min-h-400px">
          <el-tab-pane label="预订" name="book">
            <book />
          </el-tab-pane>
          <el-tab-pane label="已预订" name="alreadyBooked">
            <alreadyBooked />
          </el-tab-pane>
          <el-tab-pane label="已取消" name="cancelled">
            <bookCancelled />
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </PageContainer>
  </div>
</template>

<script lang="ts" setup>
import moment from 'moment'
import book from './groundBookTabs/book.vue'
import alreadyBooked from './groundBookTabs/alreadyBooked.vue'
import bookCancelled from './groundBookTabs/bookCancelled.vue'

defineOptions({ name: 'GroundBook' })
const selectDate = ref(moment().format('YYYY-MM-DD'))

const projectid = ref('1')
const groundBookDialog = ref(false)

const tabName = ref('book')
</script>

<style scoped lang="scss"></style>
